<template>
    <section class="circle-classification-delist">
        <Header style="z-index:1025">
            <header-menu :index="'4-1'"></header-menu>
        </Header>
        <top-search :navlist="NavTitle"></top-search>
        <user-nav :list="listTitle"></user-nav>
        <cricle-top :toplist="toplist"></cricle-top>
        <div class="container">
            <label-list></label-list>
            <div class="circle-left">
                <div class="userImg">
                    <img src="../../../assets/meirong1.jpg" alt="">
                    <p>欧阳莹莹</p>
                    <img src="../../../assets/nvshen.png" alt="">
                </div>
                <postop-time></postop-time>
                <div class="postop-text">
                    <p>重庆铂生医院</p>
                    <p>鼻综合术后第26天</p>
                    <p>放一组对比照 ~ 哇哇哇对比超级大，鼻子之前还挺塌的...没有一点儿弧度，顶多算比较可爱，谈不上漂亮。现在就比较精致的漂亮嘻嘻嘻。</p>
                    <img src="../../../assets/meirong1.jpg" alt="">
                    <img src="../../../assets/meirong1.jpg" alt="">
                    <img src="../../../assets/meirong1.jpg" alt="">
                </div>
                <comment></comment>
            </div>
            <div class="circle-right">
                <div class="beautifuldiary">
                    <Divider style="color: white">美丽日记</Divider>
                    <div class="text">
                        <p>项目：<span>鼻部综合</span></p>
                        <p>日期：2018-02-27</p>
                        <p>医院：石家庄苏亚美联臣整形</p>
                        <p>医生：单小敏</p>
                    </div>
                    <p @click="fun()">查看美丽日记 >></p>

                </div>
                <related-circles></related-circles>
                <side-list :list="sidelist"></side-list>
                <list-posts :postslist="postslist"></list-posts>
            </div>
            <div style="clear: both"></div>
        </div>

        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </section>
</template>

<script>
    import HeaderMenu from '@/components/Header/'
    import TopSearch from '../../../components/TopSearch/index'
    import PageFooter from '../../../components/Footer/index'
    import BottomIcon from '../../../components/BottomIcon/index'
    import CricleTop from '../../../components/Circle/Cricle-top'
    import CricleContent from '../../../components/Circle/CricleContent'
    import CricleSearch from '../../../components/Circle/CricleSearch'
    import CricleNav from '../../../components/Circle/CricleNav'
    import SideList from "../../../components/SideMenu/SideList"
    import ListPosts from "../../../components/ListItem/ListPosts"
    import userNav from '../../../components/Usertop/userNav'
    import Comment from "../../../components/Comment"
    import LabelList from '../../../components/Circle/LabelList'
    import RelatedCircles from '../../../components/Circle/RelatedCircles'
    import PostopTime from "@/components/Circle/PostopTime"
    export default {
        name: "CircleClassificationDelist",
        components: {
            PageFooter,
            BottomIcon,
            HeaderMenu,
            CricleTop,
            CricleContent,
            CricleSearch,
            CricleNav,
            SideList,
            ListPosts,
            userNav,
            TopSearch,
            Comment,
            LabelList,
            RelatedCircles,
            PostopTime

        },
        data () {
            return {
                NavTitle:{
                    id:1,
                    type:1,
                    name:'圈子',
                    text:'写帖子',
                    mytext:'我的帖子'
                },
                sidelist: [
                    {
                        id: 1,
                        name: '竞价排名',
                        child: [
                            {id: 1,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 2,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 3,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 4,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 2,
                        name: '大家正在预约',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 3,
                        name: '新品推荐',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 4,
                        name: '相关推荐',
                        relevant:1,
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二功能与美学矫正二功能与美学矫正二功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二功能与美学矫正二功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二功能与美学矫正二功能与美学矫正二功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 5,
                        name: '推荐医院',
                        hospital:1,
                        child: [
                            {id: 21,hospital: '北京美莱医疗美容',city: '北京市',img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,hospital: '北京美莱医疗美容',city: '北京市',img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,hospital: '北京美莱医疗美容',city: '北京市',img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 6,
                        name: '推荐医生',
                        hospital:1,
                        child: [
                            {id: 21, dortor:1,name:'孙斌',hospital: '北京美莱医疗美容',city: '北京市',img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22, dortor:1,name:'孙斌',hospital: '北京美莱医疗美容',city: '北京市',img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23, dortor:1,name:'孙斌',hospital: '北京美莱医疗美容',city: '北京市',img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                ],
                postslist: [
                    {
                        id: 1,
                        name: '浏览最多的帖子',
                        child: [
                            {id: 1,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...'},
                            {id: 2,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',},
                            {id: 3,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',},
                        ]
                    },
                    {
                        id: 2,
                        name: '回复最多的帖子',
                        child: [
                            {id: 1,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',},
                            {id: 2,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',},
                            {id: 3,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',},
                        ]
                    },
                ],
                listTitle: [
                    {id:1,name:"话题",show:false,path:'/circletopic',num:123,
                        child: {id:4,name:"话题详情",show:false,path:'/circletopicdelist',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        },
                    },
                    {id:2,name:"圈友",show:true,path:'',num:123,
                        child: {id:4,name:"活动详情",show:false,path:'',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        },
                    },
                    {id:3,name:"医院",show:false,path:'',num:123,
                        child: {id:4,name:"活动详情",show:false,path:'',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        },
                    },
                    {
                        id: 4, name: "医生", show: false, path: '',num:123,
                        child: {id: 4, name: "达人详情", show: false, path: '',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        }
                    }
                ],
                toplist:[
                    {id:1,num:123,altogether:123,type:1}
                ]

            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../style/style.less";
    .swiper{
        height: 375px;
        img{
            width: 1917px;
            height: 375px;
        }
    }
    .circle-left{
        width: 900px;
        float: left;
        .userImg{
            text-align: center;
            width: 100px;
            float: left;
            >:first-child{
                width: 94px;
                height: 94px;
                border-radius: 50%;
            }
            p{
                text-align: center;
                color: @theme-color-dark;
                font-size: 16px;
            }
        }
        .postop-text{
            width: 765px;
            float: right;
            margin-right: 15px;
            padding-top: 15px;
            padding-bottom: 100px;
            >p{
                font-size: 15px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #666666;
                padding-bottom: 5px;
            }
        }
    }
    .circle-right{
        float: right;
        width: 260px;
        .beautifuldiary{
            padding: 5px 15px 10px 15px;
            width: 260px;
            background-color: #fe5471;
            border-radius: 4px;
            margin-bottom: 30px;
            >p{
                text-align: center;
                font-size: 12px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #ffffff;
                opacity: 0.5;
                padding-top: 5px;
                cursor: pointer;
            }
        }
        .text{
            border-bottom: 1px solid #ffffff;
            >p{
                font-size: 14px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #ffffff;
                padding-bottom: 5px;

            }
            span{
                padding: 5px;
                background-color: rgba(250,250,250,0.3);
                border-radius: 4px;
                /*opacity: 0.3;*/
            }
        }


    }
</style>